<template>
  <div class="nav flex_">
    <div class="title" @click="onTap">
      <img src="../../assets/img/logo1.png" width="50" alt="">
      Lime blogs
    </div>
    <div class="nav-tag flex_">
     <NavList/>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref,onMounted} from "vue";
import { useRouter } from 'vue-router';
import NavList from './nav-list.vue'

const router = useRouter()
const onTap = () =>{
  router.push({
    path:'/blog'
  })
}


</script>

<style scoped>
.flex_ {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav {
  width: 100%;
  min-width: 768px;
  height: 70px;
  background-color: #fff;
  border-bottom: 1px solid hsla(0,0%,91.8%,.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  box-shadow: 0 0 3px hsla(0 ,0% ,92%,0.8);
  line-height: 70px;
  text-align: center;
  cursor: pointer;
  color: rgba(0,0,0,.85);
  display: flex;
  justify-content: space-around;
}

.title, .nav-tag {
  height: 100%;
  font-size: 16px;
}

.nav-bar {
  /*width: 40%;*/
  height: 100%;
}
.title{
  font-size:20px;
  font-weight: bold;
}

.them-icon {
  width: 35px;
  height: 35px;
  line-height: 40px;
  border: 1px rgba(7, 171, 72, 0.24) solid;
  border-radius: 50%;
  vertical-align: middle;
}

</style>